<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>fast-wechat</title>
    <link rel="stylesheet" href="static/lib/weui/weui.css" />
    <link rel="stylesheet" href="static/css/example.css"/>
</head>
<div class="container" id="container"><div class="page home js_show">
    <div class="page__hd">
        <h1 class="" height="21px">fast-wechat</h1>
        <p class="page__desc">WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。</p>
    </div>
    <div class="page__bd page__bd_spacing">
        <ul>
            <li>
                <div class="weui-flex js_category" data-url="<%=basePath%>testWXPay">
                    <p class="weui-flex__item">微信公众号支付</p>
                    <img src="static/image/public_account_pay.jpg" alt="">
                </div>
                <div class="page__category js_categoryInner">
                    <div class="weui-cells page__category-content">
                    </div>
                </div>
            </li>
            <li>
                <div class="weui-flex js_category">
                    <p class="weui-flex__item">自定义菜单</p>
                </div>
                <div class="page__category js_categoryInner">
                    <div class="weui-cells page__category-content">
                        <a class="weui-cell weui-cell_access js_item" data-id="article" href="javascript:;">
                            <div class="weui-cell__bd">
                                <p>自定义菜单创建接口</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_access js_item" data-id="badge" href="javascript:;">
                            <div class="weui-cell__bd">
                                <p>自定义菜单查询接口</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_access js_item" data-id="flex" href="javascript:;">
                            <div class="weui-cell__bd">
                                <p>自定义菜单删除接口</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_access js_item" data-id="footer" href="javascript:;">
                            <div class="weui-cell__bd">
                                <p>Footer</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_access js_item" data-id="gallery" href="javascript:;">
                            <div class="weui-cell__bd">
                                <p>Gallery</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_access js_item" data-id="grid" href="javascript:;">
                            <div class="weui-cell__bd">
                                <p>Grid</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_access js_item" data-id="icons" href="javascript:;">
                            <div class="weui-cell__bd">
                                <p>Icons</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_access js_item" data-id="loadmore" href="javascript:;">
                            <div class="weui-cell__bd">
                                <p>Loadmore</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_access js_item" data-id="panel" href="javascript:;">
                            <div class="weui-cell__bd">
                                <p>Panel</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_access js_item" data-id="preview" href="javascript:;">
                            <div class="weui-cell__bd">
                                <p>Preview</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_access js_item" data-id="progress" href="javascript:;">
                            <div class="weui-cell__bd">
                                <p>Progress</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                    </div>
                </div>
            </li>
            <li>
                <div class="weui-flex js_category">
                    <p class="weui-flex__item">消息管理</p>
                    <%--<img src="" alt="">--%>
                </div>
                <div class="page__category js_categoryInner">
                    <div class="weui-cells page__category-content">
                        <a class="weui-cell weui-cell_access js_item" data-id="actionsheet" href="javascript:;">
                            <div class="weui-cell__bd">
                                <p>Actionsheet</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_access js_item" data-id="dialog" href="javascript:;">
                            <div class="weui-cell__bd">
                                <p>Dialog</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_access js_item" data-id="msg" href="javascript:;">
                            <div class="weui-cell__bd">
                                <p>Msg</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_access js_item" data-id="picker" href="javascript:;">
                            <div class="weui-cell__bd">
                                <p>Picker</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                        <a class="weui-cell weui-cell_access js_item" data-id="toast" href="javascript:;">
                            <div class="weui-cell__bd">
                                <p>Toast</p>
                            </div>
                            <div class="weui-cell__ft"></div>
                        </a>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="page__ft">

    </div>
</div>
    <script type="text/javascript" src="static/lib/weui/weui.js"></script>
    <script type="text/javascript" src="static/lib/zepto.min.js"></script>
    <script type="text/javascript" class="home js_show">
        $(function(){
            var winH = $(window).height();
            var categorySpace = 10;

            $('.js_item').on('click', function(){
                var id = $(this).data('id');
                window.pageManager.go(id);
            });
            $('.js_category').on('click', function(){
                var $this = $(this),
                    $inner = $this.next('.js_categoryInner'),
                    $page = $this.parents('.page'),
                    $parent = $(this).parent('li'),url=$(this).data('url');
                if(url) {
                    window.location.href = url;
                }
                var innerH = $inner.data('height');
                bear = $page;
                if(!innerH){
                    $inner.css('height', 'auto');
                    innerH = $inner.height();
                    $inner.removeAttr('style');
                    $inner.data('height', innerH);
                }

                if($parent.hasClass('js_show')){
                    $parent.removeClass('js_show');
                }else{
                    $parent.siblings().removeClass('js_show');

                    $parent.addClass('js_show');
                    if(this.offsetTop + this.offsetHeight + innerH > $page.scrollTop() + winH){
                        var scrollTop = this.offsetTop + this.offsetHeight + innerH - winH + categorySpace;

                        if(scrollTop > this.offsetTop){
                            scrollTop = this.offsetTop - categorySpace;
                        }

                        $page.scrollTop(scrollTop);
                    }
                }
            });
        });</script></div>
</html>